今天要來介紹物件型別裡面的基礎物件,或許會想說那除了基礎物件型別以外,不是還有 TypeScript 擴充的型別 Enum
與 Tuple
和 函式型別 ? 是的,沒錯!在後面會一一介紹,每天進步一點點。
當我們定義一個 JSON 格式的 object
時,並沒有賦予型別,這時候 TypeScript 會做什麼事呢?
一開始我以為只會告訴我們,這個變數只是個 object
吧!結果很貼心的事發生了,他幫我們做型別推論,並且告訴我們這個變數是什麼型別,裡面的屬性又是為何種型別,例如: name
屬性是 string
、 age
屬性是 number
等等。
咦!那 null
和 undefined
呢? 會不會有讓人擔心的結果呢?
結果發現 Nullable Type 被推論對應的型別,而不是 any
,真的是鬆了一口氣。
接下來,我們要來一連串的以不同形式來進行覆寫。
如果物件裡的屬性被賦予不同型別的值或缺少屬性都會噴錯。
let testPackage = {
name: 'CY',
age: 28,
job: 'developer'
}
當我試著更改 age
的值,由 number
改為 string
,TypeScript 馬上就阻止我這麼做了。
testPackage = {
name: 'CY',
age: '28',
job: 'developer',
}
少了某個屬性,會被 TypeScript 提醒要補上。
testPackage = {
name: 'CY',
age: 28,
}
多了某個屬性,看來也是不行的!
testPackage = {
name: 'CY',
age: 28,
job: 'developer',
quote: 'try'
}
型別錯誤,導致噴錯。
let testPackage = {
name: 'CY',
age: 28,
job: 'developer'
}
testPackage.age = 18 // 同樣型別,但值不同,是可以的。
testPackage.age = '28' // 更改為字串,噴錯
直接新增屬性,會噴錯。
let testPackage = {
name: 'CY',
age: 28,
job: 'developer'
}
testPackage.sayHi = () => { return 'hi' } // 直接新增屬性,噴錯
接下來讓我們加上型別註記(testPackage: object
),看比較看看有什麼樣的差異。
let testPackage: object = {
name: 'CY',
age: 28,
job: 'developer'
}
// 整個覆寫,並新增屬性,完全沒問題。
testPackage = {
name: 'CY',
age: 28,
job: 'developer',
quote: 'try'
}
// 整個覆寫,並減少屬性,完全沒問題。
testPackage = {
name: 'CY',
age: 28,
}
// 整個覆寫,並屬性全改,完全沒問題。
testPackage = {
test: 'CY',
}
哇!原來加個註記可以改變這麼大喔!從這裡可以發現 TypeScript 是可以接受完整覆寫。
如果來對值進行新增修改及覆寫,會有什麼樣的情況呢?
let testPackage: object = {
name: 'CY',
age: 28,
job: 'developer'
}
// 修改原屬性的值
testPackage.name = 'Chen'
testPackage.age = '28'
testPackage.job = 'cooker'
// 新增 quote 屬性
testPackage.quote = 'try'
看來會直接噴錯,因此我們可以知道對於型別註記來說,一旦物件型別註記後,是沒有調整的空間的。
從上述的討論,來做一個小結論,TypeScript 型別推論和註記的執行機制,會根據使用者當下的操作行為,來判斷是否要提出錯誤訊息來提醒使用者。